<template>
<div id="layout">
  <ComError/>
  <!-- ComError -->
  <ComHeader/>
  <!-- ComHeader -->
  <ComSidebar/>
  <!-- ComSidebar -->
  <ComTabs/>
  <!-- ComTabs -->
  <div id="content">
    <div class="layout-content">
      <router-view/>
    </div>
    <!-- .layout-content -->
  </div>
  <!-- #content -->
  <!-- <ComFooter/> -->
  <!-- ComFooter -->
</div>
</template>
<script>
// import ComFooter from '../partials/Footer'
import ComError from '../partials/Error'
import ComHeader from '../partials/Header'
import ComSidebar from '../partials/Sidebar'
import ComTabs from '../partials/Tabs'

export default {
  name: 'layout',
  components: {
    // ComFooter,
    ComError,
    ComHeader,
    ComSidebar,
    ComTabs
  }
}
</script>
<style lang="scss" scoped>
#content {
    overflow: auto;
    height: calc(100vh - 108px);
    margin-left: 240px;
    background-color: #f8f8f8;
    .layout-breadcrumb,
    .layout-content {
        margin: 16px;
    }
    .layout-content {
        background-color: #fff;
        padding: 16px;
    }
}
</style>
